<script setup lang="ts">
  import { ref } from "vue"
  import Card from "../homeCard.vue"
  import Table from './components/homeTable.vue'
  import { GetPurchaseListApi, getUnauditedCount } from '@/api/Purchasing'
  // 为审核采购单
  const supplierList = ref([])
  const count = ref(0)
  const GetPurchaseListApiFn = async () => {
    let res = await GetPurchaseListApi({
      currentPage: 1,
      pageSize: 5,
      examineStatus: '1wait_examine'
    })
    if (res.code == 2000) {
      supplierList.value = res.data.records
      count.value = res.data.total
    }
  }


  onMounted(() => {
    GetPurchaseListApiFn()
    // getUnauditedCountApi()
  })
</script>

<template>
  <div class="supplierInfo">
    <Card title="供应商信息" path="/purchasingplan">
      <template v-slot:icon>
        <div class="icon" v-if="count > 0">(共{{ count }}家)</div>
      </template>
      <div class="mt-3" style="height: 100%;">
        <div v-if="supplierList.length > 0">
          <div class="supplierBox" v-for="(item, index) in supplierList" :key="item.id">
            <div class="mr-5">0{{ index + 1 }}</div>
            <div class="supplierName">{{ item.supplierName }}</div>
          </div>
        </div>
        <div class="noData" v-else>
          <img src="@/assets/images/noTasks.png" width="80px" height="80px" />
          <div class="font">暂无数据</div>
        </div>
      </div>

    </Card>
  </div>
</template>

<style lang="scss" scoped>
  .supplierBox {
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: var(--pb-color-light-1);
    padding: 7px 0;
    height: 100%;
  }

  .supplierInfo {
    height: calc(100% - 24%);
  }

  .supplierName {
    width: 300px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  .noData {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.45);
  }

  .icon {
    line-height: 14px;
    height: 16px;
    padding: 1px 6px;
    font-weight: 400;
    font-size: 15px;
    color: var(--pb-color-light-7);

    margin-left: 4px;
  }
</style>